html {
  font-size: 12px;
  height: 100%;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
body {
  height: 100%;
  margin: 0;
  background-color: #ddd;
  background-image: url(../背景图.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

/* 弹出框样式 */
.dialog {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 20px;
  font-size: 20px;
  background-color: #fff;
  border-radius: 5px;
  padding: 5px 10px;
  box-shadow: 0 0 5px #aaa;
}

/* 控制消失与隐藏 */
.disappear {
  display: none;
}

/* 图片样式 */
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}

/* 图标样式 */
.coin-icon {
  width: 28px;
  height: 28px;
  object-fit: cover;
  vertical-align: middle;
}

.lock-icon {
  width: 34px;
  height: 34px;
  object-fit: cover;
}

.buy-and-refresh-icon {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

/* 最外层容器 */

.container {
  position: relative;
  height: 100%;
}

/* 当前回合数 */
.round {
  position: absolute;
  width: 80px;
  text-align: center;
  background-color: rgba(0, 0, 0, .5);
  left: 10px;
  top: 10px;
  font-size: 60px;
  color: white;
}
/* 回合倒计时 */
.time {
  position: absolute;
  width: 80px;
  text-align: center;
  background-color: rgba(0, 0, 0, .5);
  right: 10px;
  top: 10px;
  font-size: 60px;
  color: white;
}

/* 展示区域 */
.show-area {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1100px;
  height: 530px;
}

.show-area .hero-card {
  position: relative;
  width: 200px;
  height: 160px;
  background-color: rgba(0, 0, 0, .5);
}

.show-area .hero-card .stars {
  width: 100%;
  height: 20px;
  background-color: rgba(0, 0, 0, .36);
  position: absolute;
  bottom: 0;
  text-align: center;
}

.show-area .hero-card .stars .star-icon {
  width: 20px;
  height: 20px;
  object-fit: cover;
}

/* 操作区域 */
.operation-area {
  position: absolute;
  width: 1200px;
  height: 240px;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}
/* 顶部状态区域 */
.top {
  display: flex;
  position: relative;
  width: 1220px;
  height: 70px;
}

/* 等级盒子 */
.top .level-box {
  display: flex;
  justify-content: space-between;
  width: 190px;
  height: 70px;
  line-height: 60px;
  position: relative;
  z-index: 2;
  user-select: none;
  /* 文字测试 */
  text-align: center;
}

.top .level-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-image: linear-gradient(to right, #091515, #093b34);
  transform-origin: bottom left;
  transform: scaleY(1.3) perspective(20px) rotateX(5deg);
  border-top: 5px solid #6c5530;
  border-right: 5px solid #6c5530;
  border-left: 5px solid #6c5530;
}

/* 进度条 */
.top .level-box .progress-bar {
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 22px;
  width: 130px;
  height: 5px;
  border-radius: 5px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, .5);
}

.top .level-box .progress-bar div {
  height: 100%;
  width: 14px;
}

.top .level-box .lv {
  margin-left: 20px;
  font-size: 24px;
  color: #e0dfd9;
}

.top .level-box .exp {
  margin-right: 40px;
  font-size: 16px;
  color: #b6c5c7;
}

/* 概率盒子 */
.top .chance-box {
  box-sizing: border-box;
  padding-left: 100px;
  padding-right: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 400px;
  height: 45px;
  line-height: 45px;
  position: relative;
  bottom: -25px;
  z-index: 1;
  left: -100px;
  user-select: none;
  /* 文字测试 */
  text-align: center;
  font-size: 16px;
}

.top .chance-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, .6);
  transform-origin: bottom;
  transform: scaleY(1.2) perspective(20px) rotateX(5deg);
}

.top .chance-box .lv1 {
  color: #5c7e93;
}

.top .chance-box .lv1::before {
  position: relative;
  left: -3px;
  bottom: -6px;
  content: "·";
  font-size: 36px;
  color: #5c7e93;
}

.top .chance-box .lv2 {
  color: #168f53;
}

.top .chance-box .lv2::before {
  position: relative;
  left: -3px;
  bottom: -6px;
  content: "·";
  font-size: 36px;
  color: #168f53;
}
.top .chance-box .lv3 {
  color: #4eabb4;
}

.top .chance-box .lv3::before {
  position: relative;
  left: -3px;
  bottom: -6px;
  content: "·";
  font-size: 36px;
  color: #4eabb4;
}
.top .chance-box .lv4 {
  color: #a54fa6;
}

.top .chance-box .lv4::before {
  position: relative;
  left: -3px;
  bottom: -6px;
  content: "·";
  font-size: 36px;
  color: #a54fa6;
}
.top .chance-box .lv5 {
  color: #e6bd1f;
}

.top .chance-box .lv5::before {
  position: relative;
  left: -3px;
  bottom: -6px;
  content: "·";
  font-size: 36px;
  color: #e6bd1f;
}

/* 硬币盒子 */
.top .coin-box {
  user-select: none;
  width: 200px;
  height: 70px;
  line-height: 60px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  /* 文字测试 */
  text-align: center;
  font-size: 24px;
  color: #dce0d9;
}

.top .coin-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-image: linear-gradient(to right, #091515, #093b34);
  transform-origin: bottom;
  transform: scaleY(2.3) perspective(10px) rotateX(10deg);
  border-top: 5px solid #6c5530;
  border-right: 5px solid #6c5530;
  border-left: 5px solid #6c5530;
}

.top .coin-box span {
  position: relative;
  left: -5px;
  bottom: -2px;
}

/* 锁定盒子 */
.top .lock-box {
  position: absolute;
  right: -10px;
  width: 100px;
  height: 70px;
  line-height: 90px;
  background-color: #16222a;
  border-top: 5px solid #6c5530;
  border-right: 5px solid #6c5530;
  border-left: 5px solid #6c5530;
  /* 文字测试 */
  text-align: center;
  font-size: 25px;
}


/* 底部卡片区域 */
.bottom {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 170px;
  background-color: #122a31;
  border: 5px solid #6c5530;
}

.bottom .left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 160px;
  height: 100%;
}

.bottom .left .opera-box {
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 80px;
  font-size: 18px;
  color: #ede3d2;
  user-select: none;
  cursor: pointer;
}

.bottom .left .opera-box:hover {
  filter: brightness(1.1);
}

.bottom .left .opera-box:first-child {
  border: 3px solid #39aacd;
  background-image: linear-gradient(to top right, #022335, #014364);
}
.bottom .left .opera-box:last-child {
  border: 3px solid #c2ac71;
  background-image: linear-gradient(to top right, #292a19, #504825);
}

.bottom .left .opera-box .text div {
  position: relative;
  top: 5px;
  left: -5px;
}

.bottom .left .opera-box .text div span {
  position: relative;
  top: 1px;
  left: -2px;
}

.bottom .left .opera-box .picture {
  position: relative;
  top: 8px;
}


.bottom .right {
  display: flex;
  justify-content: space-between;
  width: 1020px;
  height: 100%;
}

.bottom .right .hero-box {
  box-sizing: border-box;
  width: 194px;
  height: 100%;
  font-size: 0;
  user-select: none;
  cursor: pointer;
}

.bottom .right .hero-box:hover {
  filter: contrast(1.2);
}

.bottom .right .hero-box img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.bottom .right .hero-box .info {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  font-size: 18px;
  height: 30px;
  width: 100%;
}

.bottom .right .hero-box .info div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  width: 30px;
}

.bottom .right .hero-box .info div img {
  width: 22px;
  height: 22px;
  object-fit: cover;
}

/* 五种等级 */
.one {
  outline: 3px solid #5c7e93;
  background-color: #5c7e93;
}
.two {
  outline: 3px solid #168f53;
  background-color: #168f53;
}
.three {
  outline: 3px solid #4eabb4;
  background-color: #4eabb4;
}
.four {
  outline: 3px solid #a54fa6;
  background-color: #a54fa6;
}
.five {
  outline: 3px solid #e6bd1f;
  background-color: #e6bd1f;
}